<template>
  <div class="treasure_hunt">
    <van-nav-bar title="AR寻宝" left-text="" left-arrow @click-left="back" />
    <div class="content">
      <div class="title">
        {{ tip }}
      </div>
      <div class="target_object">
        <div v-for="(item, index) in treasureHunt" :key="index" class="target_object_item">
          <template v-if="item.pic === ''">
            <img src="https://jwc-static.jdwxk.com/imgs/activities/treasure_hunt_target.png" alt="">
          </template>
          <template v-else>
            <!-- <img :src="item.img" alt=""> -->
            <img class="card_img" :src="cardBaseUrl + item.pic" alt="">
          </template>
          <div class="text">
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="open_ar" @click="openLink()">
        <img src="https://jwc-static.jdwxk.com/imgs/activities/treasure_hunt_btn.png" alt="">
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
// const activityStore = useActivityStoreG()

import { getAllCards } from '@/api/activities'

import { useUserStoreWidthOut } from '@/store/modules/user'

const userStore = useUserStoreWidthOut()
const userInfo = computed(() => userStore.getUserInfo)

// const state = reactive({
//   targetObject: [
//     {
//       img: 'https://file.moyublog.com/d/file/2023-12-20/04c67308f22241038af277bcfa1fdf1b.jpg',
//       text: '黑板',
//       keyWord: ['黑板'],
//     },
//     {
//       img: 'https://file.moyublog.com/d/file/2023-12-20/04c67308f22241038af277bcfa1fdf1b.jpg',
//       text: '陈列馆牌',
//       keyWord: ['陈列', '展馆'],
//     },
//     {
//       img: 'https://file.moyublog.com/d/file/2023-12-20/04c67308f22241038af277bcfa1fdf1b.jpg',
//       text: '灶台',
//       keyWord: ['灶台'],
//     },
//     {
//       img: 'https://file.moyublog.com/d/file/2023-12-20/04c67308f22241038af277bcfa1fdf1b.jpg',
//       text: '知青文化看景坞',
//       keyWord: ['坞', '知青'],
//     },
//     {
//       img: '',
//       text: '书架',
//       keyWord: ['书架', '书', '架子', '木架'],
//     },
//     {
//       img: '',
//       text: '锅',
//       keyWord: ['眼镜'],
//     },
//   ],
// })

// import { useActivityStoreG } from '@/store/modules/activity'
// import ResultTip from './resultTip/index.vue'

const tip = ref('使用 AR 扫码寻找以下宝物， 即可收获道具并获得10积分')
const cardBaseUrl = ref(import.meta.env.VITE_GLOB_IMG_URL)
// const treasureHunt = computed(() => activityStore.getTreasureHunt)
const treasureHunt = ref([])

const router = useRouter()
function back() {
  router.back()
}
function openLink() {
  const temp = JSON.parse(JSON.stringify(treasureHunt.value))
  const readyHunt = temp
  console.log('跳转ar,去识别指定物品', readyHunt)
  router.push({
    name: 'ArPage',
    query: {
      targetObject: JSON.stringify(readyHunt),
    },
  })
}
onMounted(async () => {
  console.log('页面打开或者ar识别后刷新当前已识别的宝物', treasureHunt.value)
  const res = await getAllCards({ type: 'goods', size: 100, phone: userInfo.value.phone })
  const temp = res.data.records.map((i) => {
    return { name: i.name, id: i.id, cardPic: i.pic, pic: i.cardPic }
  })
  treasureHunt.value = temp
})
</script>

<style lang="scss" scoped>
.treasure_hunt {
  width: 100%;
  height: 100vh;
  background: url('https://jwc-static.jdwxk.com/imgs/activities/treasure_hunt_bg.png');
  background-repeat: no-repeat;
  background-size: cover;

  .content {
    top: 170px;
    left: 50%;
    transform: translate(-50%, 0%);
    position: absolute;
    // width: 336px;
    width: calc(100vw - 40px);
    height: calc(100vh - 170px - 40px);
    background: url('https://jwc-static.jdwxk.com/imgs/activities/treasure_hunt_bg2.png');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .title {
    color: #a95644;
    font-size: 15px;
    line-height: 25px;
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
    text-align: center;
    margin: 12px auto;
    height: 50px;
  }

  .target_object {
    background-color: white;
    padding: 24px;
    box-sizing: border-box;
    width: 312px;
    height: calc(100vh - 170px - 40px - 120px);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    overflow-y: scroll;
    z-index: 100;
  }

  .target_object_item {
    img {
      width: 120px;
      height: 90px;
      border-radius: 6px;
    }

    .text {
      color: #663c2a;
      font-size: 14px;
      text-align: center;
      margin-top: 10px;
    }
  }

  .open_ar {
    z-index: 200;

    img {
      width: 78px;
      height: 78px;
      margin-top: -39px;
    }
  }
}
</style>
